<template>
	<view class="contanier">
		<up-cell-group>
			<up-cell title="头像" @click="handlerUpload">
				<template #right-icon>
					<up-icon name="arrow-right"></up-icon>
				</template>
				<template #value>
					<up-avatar :src="userInfo.avatarUrl" shape="square" size="50"></up-avatar>
				</template>
			</up-cell>
			<up-cell title="名字" :value="userInfo.nickname" @click="toEdit('nickname',userInfo.nickname)">
				<template #right-icon>
					<up-icon name="arrow-right"></up-icon>
				</template>
			</up-cell>
			<up-cell title="账号" :value="userInfo.username" @click="toEdit('username',userInfo.username)">
				<template #right-icon>
					<up-icon name="arrow-right"></up-icon>
				</template>
			</up-cell>
			<up-cell title="二维码" @click="toEdit('qrcode',userInfo.id)">
				<template #right-icon>
					<up-icon name="arrow-right"></up-icon>
				</template>
				<template #value>
					<view class="iconfont aa-erweima"></view>
				</template>
			</up-cell>
			<up-cell title="性别" :value="userInfo.gender==0?'男':'女'" @click="toEdit('gender',userInfo.gender)">
				<template #right-icon>
					<up-icon name="arrow-right"></up-icon>
				</template>
			</up-cell>
			<!-- <up-cell title="地区" value="广东 中山" @click="toEdit('place','RogerH')">
				<template #right-icon>
					<up-icon name="arrow-right"></up-icon>
				</template>
			</up-cell>  -->
			<up-cell title="个性签名" :value="userInfo.remask" @click="toEdit('remask',userInfo.remask)">
				<template #right-icon>
					<up-icon name="arrow-right"></up-icon>
				</template>
			</up-cell>
		</up-cell-group>
		<qf-image-cropper ref="cropperRef" v-if="showCrop" :width="500" :height="500" :radius="30" @crop="handleCrop" :src="cropImgUrl"></qf-image-cropper>
	</view>
</template>

<script lang="ts">

export default{
	options:{
		styleIsolation:'shared'
	}
}

</script>

<script setup lang="ts">
	import {ref} from "vue"
	import { useUserStore } from "../../store/userStore";
	import QfImageCropper from '@/uni_modules/qf-image-cropper/components/qf-image-cropper/qf-image-cropper.vue';
	import { UserUploadAvatarReq } from "../../http/user";

	const avatarUrl =ref("https://uview-plus.jiangruyi.com/h5/static/uview/album/2.jpg")

	const userStore=useUserStore()

	const showCrop=ref(false)

	const cropperRef=ref()

	const cropImgUrl=ref("")

	const userInfo=ref(userStore.user)

	const handlerUpload=()=>{
		uni.navigateTo({
			url:"/pages/common/cropper",
			success:(res)=>{
				res.eventChannel.on("afterCrop",(file)=>{
					UserUploadAvatarReq({filePath:file.tempFilePath}).then(result=>{
						userInfo.value.avatarUrl=result.data.url
						userStore.setUser(userInfo.value)
					})
				})
			}
		})
	}

	const toEdit=(type,value)=>{
		uni.navigateTo({
			url:"/pages/myInfo/editInfo",
			success:(res)=>{
				res.eventChannel.emit("toEditData",{type:type,value:value})
				res.eventChannel.on("editConfirm",(data)=>{
					console.log(data)
					if(data.type==type){
						userInfo.value[data.type]=data.value
						userStore.setUser(userInfo.value)
					}
				})
			}
		})
	}
	
</script>

<style lang="scss" scoped>
	.contanier{
		::v-deep .u-upload__wrap{
			display: block; 
		}
		::v-deep .u-cell__value{
			width: 50%;
		}
	}
	
</style>
